<template>
  <div>
    往来日期：
    <el-date-picker v-model="date1" size="small" style="width:150px"></el-date-picker>-
    <el-date-picker v-model="date2" size="small" style="width:150px"></el-date-picker>&nbsp;&nbsp;&nbsp;&nbsp;
    供应商：
    <el-select v-model="supplierId" size="small" style="width:150px">
      <el-option
        size="small"
        v-for="bean in supplierList"
        :label="bean.name"
        :value="bean.id"
        :key="bean.id"
      >{{bean.name}}</el-option>
    </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
    是否付款：
    <el-select v-model="state" size="small" style="width:150px">
      <el-option
        size="small"
        v-for="bean in stateList"
        :label="bean.name"
        :value="bean.id"
        :key="bean.id"
      >{{bean.name}}</el-option>
    </el-select>
    <el-button type="primary" size="small" @click="getRoleMenuList()">搜索</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button type="primary" size="small" @click="pay()">支付结算</el-button>
    <br />
    <br />

    <div style="height:300px">
      <el-table
        :data="tableData"
        style="width: 100%;"
        max-height="300px"
        border
        @row-click="selectGoodsList"
      >
        <el-table-column align="center" type="index" width="50" label="序号" fixed="left"></el-table-column>
        <el-table-column prop="name" label="供应商" width="200"></el-table-column>
        <el-table-column prop="purchaseDate" label="日期" width="100" :formatter="formatter1"></el-table-column>
        <el-table-column prop="purchaseNumber" label="单号" width="150"></el-table-column>
        <el-table-column prop="purchaseNumber" label="类型" width="100" :formatter="formatter2"></el-table-column>
        <el-table-column prop="amountPayable" label="总金额" width="150"></el-table-column>
        <el-table-column prop="state" label="付款状态" width="100" :formatter="formatter3"></el-table-column>
        <el-table-column prop="trueName" label="操作员" width="100"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="240"></el-table-column>
      </el-table>
    </div><br/>

    <el-table :data="goodsList" style="width: 100%" max-height="300" border>
      <el-table-column align="center" type="index" width="50" label="序号" fixed="left"></el-table-column>
      <el-table-column prop="code" label="商品编码" width="100"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
      <el-table-column prop="model" label="商品型号" width="150"></el-table-column>
      <el-table-column prop="price" label="单价" width="100"></el-table-column>
      <el-table-column prop="num" label="数量" width="150"></el-table-column>
      <el-table-column prop="unit" label="单位" width="100"></el-table-column>
      <el-table-column prop="total" label="总金额" width="100"></el-table-column>
    </el-table>
  </div>
</template>


<script>
export default {
  methods: {
    getRoleMenuList() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tPurchaseListGoods/purchaseQuery",
        params: {
          date1: $this.date1,
          date2: $this.date2,
          supplierId: $this.supplierId,
          state: $this.state,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.tableData = res.data.obj;
      });
    },
    getSupplier() {
      var $this = this;

      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tPurchaseListGoods/getSupplier",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.supplierList = res.data.obj;
      });
    },
    selectGoodsList(row) {
      var $this = this;
      $this.id = row.id;
      $this.purchaseNumber = row.purchaseNumber.substring(0, 2);
      if (row.purchaseNumber.substring(0, 2) == "JH") {
        this.axios({
          method: "post",
          url: "http://localhost:9999/biz/tPurchaseListGoods/getPurchaseGoods",
          params: {
            id: row.id,
            access_token: localStorage.getItem("access_token")
          }
        }).then(function(res) {
          $this.goodsList = res.data.obj;
        });
      } else if (row.purchaseNumber.substring(0, 2) == "TH") {
        this.axios({
          method: "post",
          url: "http://localhost:9999/biz/tPurchaseListGoods/getReturnGoods",
          params: {
            id: row.id,
            access_token: localStorage.getItem("access_token")
          }
        }).then(function(res) {
          $this.goodsList = res.data.obj;
        });
      }
    },
    formatter1(row) {
      if (row.purchaseDate != "") {
        return row.purchaseDate.substring(0, 10);
      }
    },
    formatter2(row) {
      if (row.purchaseNumber.substring(0, 2) == "JH") {
        return "进货单";
      } else if (row.purchaseNumber.substring(0, 2) == "TH") {
        return "退货单";
      }
    },
    formatter3(row) {
      if (row.state == 1) {
        return "已付";
      } else if (row.state == 2) {
        return "未付";
      }
    },
    pay(){
      var $this = this;
      if ($this.purchaseNumber == "JH") {
        this.axios({
          method: "post",
          url: "http://localhost:9999/biz/tPurchaseListGoods/updPurchaseList",
          params: {
            id: $this.id,
            access_token: localStorage.getItem("access_token")
          }
        }).then(function(res) {
          if(res.data.code==200){
            $this.getRoleMenuList();
          }
        });
      } else if ($this.purchaseNumber == "TH") {
        this.axios({
          method: "post",
          url: "http://localhost:9999/biz/tPurchaseListGoods/updReturnList",
          params: {
            id: $this.id,
            access_token: localStorage.getItem("access_token")
          }
        }).then(function(res) {
          if(res.data.code==200){
            $this.getRoleMenuList();
          }
        });
      }
    }
  },
  data() {
    return {
      tableData: [],
      goodsList: [],
      date1: new Date(),
      date2: new Date(),
      state: "",
      supplierId: "",
      supplierList: [],
      purchaseNumber:'',
      id: '',
      stateList: [
        {
          id: "",
          name: "全部"
        },
        {
          id: 1,
          name: "已付"
        },
        {
          id: 2,
          name: "未付"
        }
      ]
    };
  },
  mounted() {
    this.getRoleMenuList();
    this.getSupplier();
  }
};
</script>
